<template>
  <el-form class="fillup-company" ref="form" :model="formData" :rules="rules">
    <el-form-item prop="companyName">
      <el-input
        v-model="formData.companyName"
        :placeholder="$tInput('company.companyName')"
      >
        <template #prefix>
          <SvgIcon name="gongsi" />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="socialCreditCode">
      <el-input
        v-model="formData.socialCreditCode"
        :placeholder="$tInput('field.socialCreditCode')"
      >
        <template #prefix>
          <SvgIcon name="xinyongdaima" />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="companyType">
      <el-select
        v-model="formData.companyType"
        :placeholder="$tSelect('company.companyType')"
      >
        <template #prefix>
          <SvgIcon name="type" />
        </template>
        <el-option
          v-for="item in dictData['company_type']"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item prop="companyScale">
      <el-select
        v-model="formData.companyScale"
        :placeholder="$tSelect('company.companyScale')"
      >
        <template #prefix>
          <SvgIcon name="renwu-tuandui" />
        </template>
        <el-option
          v-for="item in dictData['company_scale']"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item prop="address">
      <el-input
        v-model="formData.address"
        :placeholder="$tInput('company.address')"
      >
        <template #prefix>
          <SvgIcon name="suozaidi" />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="businessLicenses" class="text-left">
      <div class="upload-label">请上传许可证证照：</div>
      <Upload
        :multiple="false"
        v-model="formData.businessLicenses"
        :show-file-list="false"
        single
      >
        <div class="upload-content">
          <img
            class="upload-img"
            :src="formData.businessLicenses[0].url"
            v-if="formData.businessLicenses.length > 0"
          />
          <template v-else>
            <div class="upload-empty-icon">
              <SvgIcon name="camera_full" />
            </div>
            <div class="upload-empty-text">上传图片</div>
          </template>
        </div>
      </Upload>
    </el-form-item>
    <el-form-item prop="certificationLetters" class="text-left">
      <div class="upload-label">
        请上传认证公函<span
          class="upload-download"
          @click="$downloadUrl('/templates/gonghan.doc')"
          >（下载模版）</span
        >：
      </div>
      <Upload
        :multiple="false"
        v-model="formData.certificationLetters"
        :show-file-list="false"
        single
      >
        <div class="upload-content">
          <img
            class="upload-img"
            :src="formData.certificationLetters[0].url"
            v-if="formData.certificationLetters.length > 0"
          />
          <template v-else>
            <div class="upload-empty-icon">
              <SvgIcon name="camera_full" />
            </div>
            <div class="upload-empty-text">上传图片</div>
          </template>
        </div>
      </Upload>
    </el-form-item>
    <el-button
      class="w-100"
      type="primary"
      round
      @click="submitForm"
      :loading="submiting"
      >保存并下一步</el-button
    >
  </el-form>
</template>

<script>
import { dictMixin } from 'mixins'
import { fillup } from 'services/company/auth'
import { mapState } from 'vuex'
import { Upload } from 'components'
export default {
  name: 'FillupCompany',
  mixins: [dictMixin],
  dicts: ['company_type', 'company_scale'],
  // eslint-disable-next-line vue/no-unused-components
  components: { Upload },
  data() {
    return {
      formData: {},
      submiting: false,
      captcha: null,
      uuid: null,
      captchaImg: null
    }
  },
  computed: {
    ...mapState(['userInfo']),
    rules() {
      return {
        companyName: this.$rule('company.companyName', {
          required: true
        }),
        socialCreditCode: this.$rule('field.socialCreditCode', {
          required: true
        }),
        companyType: this.$rule('company.companyType', {
          required: true,
          trigger: 'blur'
        }),
        companyScale: this.$rule('company.companyScale', {
          required: true,
          trigger: 'blur'
        }),
        address: this.$rule('company.address', {
          required: true
        }),
        businessLicense: this.$rule('company.businessLicenses', {
          required: true
        }),
        certificationLetter: this.$rule('company.certificationLetters', {
          required: true
        })
      }
    }
  },
  methods: {
    async submitForm() {
      try {
        const valid = await this.$refs.form.validate()
        if (!valid) {
          return
        }
        this.submiting = true
        await fillup(this.formData)
        this.$emit('success')
      } finally {
        this.submiting = false
      }
    }
  },
  created() {
    this.formData = { ...this.userInfo }
  }
}
</script>

<style lang="scss" scoped>
@import 'styles/common.scss';
.upload-label {
  color: $colorText1;
}
.upload-download {
  color: $colorPrimary;
  cursor: pointer;
}
.upload-content {
  width: 306px;
  height: 180px;
  background: #f6f6f6;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #aaa;
  overflow: hidden;
  font-size: 18px;
  .upload-empty-icon {
    @include circle(42px);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: $colorPrimary;
    color: #fff;
  }
  .upload-empty-text {
    margin-top: 10px;
  }
  .upload-img {
    width: 100%;
  }
}
</style>
